<template>
    <div class="flex-row-center base-size mb20 pointer">
        <a class="home_icon" href="https://zhyq.ailuquan.cn/website/shijzslqqzf">首页</a>
        <span class="ml5 mr5">></span>
        <span @click="proxy.routerBackMixin" class="base-color">培训课程</span>
        <span class="ml5 mr5">></span>
        <span class="">详情</span>
    </div> 
    <div>
        <div class="video-box flex-row">
            <!-- 线上视频及封面 -->
            <vue3VideoPlay v-bind="videoOptions" poster="" v-if="detail.videojson.length>0&&detail.complete!=''&&detail.verify_state=='1'&&detail.type==0"
                @timeupdate="onTimeupdate" @loadedmetadata="loadedmetadata"/>
            <el-image v-if="(detail.videojson.length==0||!detail.videojson||detail.complete==''||detail.verify_state=='0')&&detail.type==0" style="width: 1200px; height: 680px" fit="cover" :src="fileurl+ '/train/'+ detail.cover">
                        <template #error>
                            <div class="image-slot">
                                <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                            </div>
                        </template>
                    </el-image>
            <!-- 线下封面 -->
            <el-image v-if="detail.type==1" style="width: 1200px; height: 680px" fit="cover" :src="fileurl+ '/train/'+ detail.cover">
                        <template #error>
                            <div class="image-slot">
                                <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                            </div>
                        </template>
                    </el-image>
            <div class="videos-tab flex-column pd10-row" v-if="detail.videojson.length>0&&detail.complete!=''&&detail.verify_state=='1'&&detail.type==0">
                <div 
                    :class="['tab','mt10','pd10','pointer',tabidx==i?'tab-active':'']"
                    v-for="(v,i) in detail.videojson" :key="i" @click="tabclick(i,v)">
                    <span class="lineTwo">{{v.name||'暂无视频名称'}}</span>
                    <span v-if="(studyform.study&&studyform.study[i].studytime!=0&&studyform.study[i].alltime!=0&&studyform.study[i].studytime==studyform.study[i].alltime)" class="state-btn-success">已看完</span>
                </div>
            </div>
            <!-- <div class="sign-box flex-center" v-if="(detail.complete==''||detail.verify_state=='0')&&detail.type==0">
                <div v-if="detail.complete==''" class="sign base flex-center pointer" @click="sign(detail.train_id)">现在报名</div>
                <div v-if="detail.verify_state=='0'" class="sign base flex-center pointer">审核中...</div>
            </div> -->
        </div>
        <div class="flex-row head-box mt10">
            <div class="flex-column" style="flex:1;">
                <div class="large-size weight mb10 ml10">
                    {{detail.name||''}}
                    <span :class="[`state-btn-${detail.type==0?'primary':'warning'}`,'ml10']">{{detail.type==0?'线上':'线下'}}</span>
                    <span v-if="detail.complete==1" class="state-btn-success">已完成</span>
                </div>
                <div class="flex-row-center ju-flex-start mt10 mb10 ml10 base-gray-size">
                    <span class="base-size mr20">课时数：{{detail.classhour||''}}</span>
                    <span class="base-size mr10">报名企业数：{{detail.companyCou||0}}人</span>
                    <!-- <span class="base-size mr10 flex-row-center">开课时间：{{detail.starttime.substring(0,10)||''}} ~ {{detail.endtime.substring(0,10)||''}}</span> -->
                </div>
            </div>
            <!-- <div :class="['cancel', 'flex-center', 'pointer', detail.complete!=''?'btn-gray':'btn-primary']" @click="sign(detail.train_id)">{{detail.complete!=''?'取消报名':'现在报名'}}</div> -->
        </div>
        <div class="line mb20"></div>
        <div v-html="detail.msg" class="mt20 v-html"></div>
    </div>
</template>
<script setup>
    import { reactive,ref,getCurrentInstance,toRaw,inject,toRefs } from 'vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        detail:{},
        fileurl: proxy.$setting.globalUrl.fileurl,
        isEdit: 0,
        total: 0,
        list:[],
        sifterForm: {
            key: '',
            type: '',
            "issign":"",
            "time": "",
            "starttime":"",
            "endtime":"",
            currentpage: 1,
            pagesize: 10
        },
        detail: {},
        tabidx: 0,
        videoOptions: {
            width: "700px", //播放器高度
            height: "680px", //播放器高度
            color: "#409eff", //主题色
            title: "", //视频名称
            src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
            muted: false, //静音
            webFullScreen: false,
            speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
            speed: false, //关闭进度条拖动
            autoPlay: false, //自动播放
            loop: false, //循环播放
            mirror: false, //镜像画面
            ligthOff: false, //关灯模式
            volume: 1, //默认音量大小
            control: true, //是否显示控制
            controlBtns: [
                "audioTrack",
                "quality",
                "speedRate",
                "volume",
                "setting",
                "pip",
                "pageFullScreen",
                "fullScreen",
            ], //显示所有按钮,
        },
        isupdata: true,
        studyform:{
            train_id: '',
            study: []
        }
    })

    let init = ()=>{
        obj.detail = JSON.parse(sessionStorage.getItem('traindetailkey'))
    }
    init()

    const tabclick = (i,row)=>{
        tabidx.value = i
        videoOptions.value.src = fileurl.value+ '/train/'+ row.file
        console.log(videoOptions.value.src);
    }

    const editData = (item)=>{
        if(item){
            detail.value = item
            if(item.type==0&&detail.value.videojson){
                videoOptions.value.src = fileurl.value+ '/train/'+ detail.value.videojson[0].file
                tabidx.value= 0
            }
            // 更新学习情况
            studyform.value.train_id = item.train_id
            if(detail.value.type==0&&detail.value.videojson.length>0){//线上
                if(!detail.value.study||detail.value.study.length==0){
                    studyform.value.study = []
                    detail.value.videojson.map(e=>{
                        const o = {
                            video: e.file,
                            studytime: 0,
                            alltime: 0
                        }
                        studyform.value.study.push(o)
                    })
                }else{
                    studyform.value.study = detail.value.study
                }
            }
            isupdata.value = true
            isEdit.value = 3
        }
    }

    const sign = (id)=>{
        if(id){
            proxy.$ajax({url: 'train/sign',data:{train_id:id},bfLoading: true}).then(d => {
                console.log(d);
                if(d.success){
                    proxy.elMessageMixin('成功！', 'success')
                    detail.value.complete = detail.value.complete==''?'0':''
                    detail.value.verify_state = detail.value.verify_state==''?'0':''
                    updalist()
                }else{proxy.elMessageMixin(date.err, 'error')}
            }).catch(e => {
                console.log(e)
                if(e == "登录已过期，请重新登录"){
                    proxy.routerPushMixin('/')
                }
            })
        }
    }

    //更新学习情况
    const updatastudy = (param)=>{
        isupdata.value = true
        proxy.$ajax({url: 'train/study',data:param,bfLoading: false}).then(d => {
            console.log(d);
            if(d.success){
                // proxy.elMessageMixin('学习记录成功！', 'success')
                //完成该课程
                let complete = true
                studyform.value.study.map(e=>{
                    if(complete&&e.studytime<e.alltime||(e.studytime==0&&e.alltime==0)){
                        complete = false
                    }
                })
                if(complete){
                    completestudy(studyform.value.train_id)
                } 
            }else{proxy.elMessageMixin(date.err, 'error')}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }

    //完成学习train/complete
    const completestudy = (id)=>{
        proxy.$ajax({url: 'train/complete',data:{train_id:id},bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                detail.value.complete = 1
                proxy.elMessageMixin('该课程已完成学习！', 'success')
            }else{proxy.elMessageMixin(date.err, 'error')}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }

    const onTimeupdate = (ev) => {
        // console.log(ev.srcElement);
        if(ev.srcElement.duration!==ev.srcElement.duration){
            // proxy.elMessageMixin('视频格式错误', 'error')
            return
        }
        if(detail.value.complete==1){
            return
        }
        let alltime = +ev.srcElement.duration
        let studytime = +ev.srcElement.currentTime.toFixed(0)
        if(studytime&&studytime%5==0&&isupdata.value){
            console.log(studytime);
            isupdata.value = false
            studyform.value.study[tabidx.value].studytime = studytime
            studyform.value.study[tabidx.value].alltime = alltime

            //该视频学习完成
            if(alltime-5<=studytime){
                studyform.value.study[tabidx.value].studytime = alltime
            }
            // return
            //更新学习情况
            proxy.$utils.debounce(updatastudy,studyform.value,1000)
        }
    };

    const loadedmetadata = (ev) => {
        console.log(ev);
    };
    
    
    let { list, sifterForm, isEdit, total, fileurl, detail, tabidx, videoOptions, studyform, isupdata } = toRefs(obj)
</script>

<style lang="scss" scoped>
    .video-box{
        width: 1200px;height: auto;position:relative;
        .videos-tab{
            width: 160px;height: 680px;overflow-y: auto; background: #f7f7f7;
            .tab{background: #f0f0f0;border-radius: 0px;}
            .tab-active{background: rgba(0,122,255,0.1);color: rgba(0,122,255,1);}
            .mulu-success{background: rgba(66,207,149,0.1);color: rgba(66,207,149,1);}
        }
        .sign-box{
            position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.6);
            .sign{
                width: 160px;height: 50px;border-radius: 0px;color: #fff;background: #1f71e0;
            }
        }
    }
    .head-box{width: 100%;
        .cancel{
            width: 160px;height: 50px;border-radius: 0px;
        }
    }
</style>